<template>
  <div class="store-shelf">
    <shelf-title :title="$t('shelf.title')" class="store-title"></shelf-title>
    <scroll
      class="store-shelf-scroll-wrapper"
      :top="0"
      :bottom="ScrollButton"
      @onScroll="onScroll"
      ref="scroll"
    >
      <shelf-search class="shelf-search"></shelf-search>
      <shelf-list :data="shelfList"></shelf-list>
    </scroll>
    <shelf-footer></shelf-footer>
  </div>
</template>
<script>
import shelfFooter from '../../components/shelf/shelfFooter.vue'
import shelfSearch from '../../components/shelf/shelfSearch.vue'
import shelfTitle from '../../components/shelf/shelfTitle.vue'
import { storeShelfMixin } from '../../utils/mixin'
import Scroll from '../../components/common/Scroll.vue'
import shelfList from '../../components/shelf/shelfList.vue'
export default {
  mixins: [storeShelfMixin],
  data() {
    return {
      ScrollButton: 0
    }
  },
  watch: {
    // 处于编辑模式时 将scrllo 的 button 设置为 48
    isEditMode(EditMode) {
      this.ScrollButton = EditMode ? 48 : 0
      // 这里不能立即调用refresh方法 因为会触发一些dom
      // 需要dom完成之后再调用
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    }
  },
  components: {
    shelfTitle,
    Scroll,
    shelfSearch,
    shelfList,
    shelfFooter
  },
  methods: {
    onScroll(offsetY) {
      this.setOffsetY(offsetY)
    }
  },
  mounted() {
    this.getShelfList() // 获取书架列表数据
    this.setShelfCategory([]) // 处于书架列表 所以SheltCategory 为空
    this.setCurrentType(1) // 表示当前处于书架列表
  }
}
</script>

<style lang='scss' scopde>
.store-shelf {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: white;
  .store-shelf-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
  }
}
</style>
